<template>
	<div id="saveAddres">
		<!--<haders title="新增/编辑地址"></haders>-->
		<scroller ref="scroller">
			<div class="mian">
				<ul class="addres">
					<mt-field label="联系人" placeholder="收货人姓名" v-model="username"></mt-field>
					<mt-field label="联系电话" placeholder="收货人手机号" type="tel" v-model="phone"></mt-field>
					<mt-field label="选择区域" placeholder="选择省、市、区" v-model="areaTxt" :readonly="true" @click.native="selquyu"></mt-field>
					<mt-field label="详细地址" placeholder="详细地址" v-model="address"></mt-field>
					<li class="setck">
						<label @click="radioset()">
								<i class="iconfont" :class="type==1? 'icon-xuanzhong1':'icon-danxuankuangxuanzhong'"></i> 
								<a>设置为默认地址</a>
						</label>
					</li>
				</ul> 
			</div>
		</scroller>
		<footer>
			<a class="butOK" @click="butOK">保 存</a>
		</footer>

		<mt-popup v-model="popupVisible" position="bottom">
			<div class="selected">
				<v-distpicker type="mobile" @selected="onSelected" @province="provinces" @city="citys"    @area="areas"  ></v-distpicker>
			</div>
			
			
			<!--<div class="selected">
				<distpicker></distpicker>
				
			</div>-->

		</mt-popup>

	</div>
</template>
<script> 
	import VDistpicker from 'v-distpicker';
	import { Popup } from 'mint-ui';
	import { Field } from 'mint-ui';
	import { Toast } from 'mint-ui';
	import { Picker } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import Qs from 'qs';
	export default {
		name: 'saveAddres',
		components: {
			VDistpicker,
			Popup,
			Field,
			Picker
		},
		data() {
			return {
				popupVisible: false,
				username: '',
				phone: '',
				areaTxt: '',
				areaCode: '',
				address: '',
				type:"",
				provinceText:'',//省级名称
				provinceCode:'',//省级ID
				cityText:'',	//城市名称
				cityCode:'',//城市ID
				areaText:'',//区县名称
				areaCode:'',//区县ID 
				AllData:''
			}
		},
		mounted() {
			this.IDdata=this.$route.params.IDdata;
			this.GetMyAddress(); 
		},
		methods: {
			//获取省级
			provinces(data){
				 this.provinceText=data.value;
				 this.provinceCode=data.code;
			},
			//获取市级
			citys(data){
				this.cityText=data.value;
				 this.cityCode=data.code;
			},
			//获取区县级
			areas(data){
				this.areaText=data.value;
				 this.areaCode=data.code;
			},
			//最后选项返回函数
			onSelected(data) { 
				this.areaTxt = this.provinceText + ',' + this.cityText + ',' + this.areaText
				this.areaCode = this.provinceCode + ',' + this.cityCode + ',' + this.areaCode
				console.log(this.areaCode);
				this.popupVisible = false; 
			},
			radioset: function() {
				this.type = !this.type;
			},
			selquyu: function() { 
				this.popupVisible = true;
			},
			butOK() {
				let _this = this 
				if(_this.username == "") {
					Toast("请输入联系人");
				} else if(!(/^1\d{10}$/.test(_this.phone))) {
					Toast("请输入正确格式手机号");
				} else if(_this.areaTxt == "") {
					Toast("请选择区域");
					
				} else if(_this.address== "") {
					Toast("请输入详细地址");
				} else {
					if(_this.IDdata){
						_this.AllData={
							"id":_this.IDdata,
							"contact": _this.username,
							"phone": _this.phone,
							"address": _this.address,
							"isDefault": _this.type,
							"areaCode": _this.areaCode,
							"areaTxt": _this.areaTxt 
						} 
					}else{
						_this.AllData={ 
							"contact": _this.username,
							"phone": _this.phone,
							"address": _this.address,
							"isDefault": _this.type,
							"areaCode": _this.areaCode,
							"areaTxt": _this.areaTxt 
						}
					}
					Indicator.open({text: '提交信息中...'}); 
					_this.$http.post('/GroupBuy/SaveMyAddress', Qs.stringify(
						_this.AllData
					)).then((res) => { 
						if(res.data.code == 1){
							Indicator.close();
							Toast({
								message: '提交成功',
								iconClass: 'iconfont icon-zhengque'
							})
							setTimeout(function() {
								_this.$router.push({
									path: '/clientele/addAddress'
								});
							}, 3000) 
						}else{
							Toast(res.data.msg);
						}
						
					}).catch((err) => {
						console.log(err);
					});
				}
			},
			//修改地址信息
			GetMyAddress(){
				let _this=this;
				if(_this.IDdata){
					_this.$http.get('/GroupBuy/GetMyAddressDetails',{
						params: {
							"id": _this.IDdata
						}	
					}).then((res) => {
						if(res.data.code==1){
							let items=res.data.data;
							_this.username=items.Name;
							_this.phone=items.Tel;
							_this.address=items.Adress;
							 console.log(_this.address);
							_this.provinceText=items.ProvinceName;
							_this.provinceCode=items.ProvinceCode;
							_this.cityText=items.CityName;
							_this.cityCode=items.CityCode; 
							_this.areaText=items.DistrictName; 
							_this.areaCode=items.DistrictCode;
							_this.type=items.DefultAdress;
							_this.areaTxt = items.ProvinceName + ',' + items.CityName + ',' + items.DistrictName
							_this.areaCode = items.ProvinceCode + ',' + items.CityCode + ',' + items.DistrictCode 
						}else{
							Toast(res.data.msg)
						} 
						
					}).catch((err) => {
						console.log(err);
					});
				} 
			} 
		}
	}
</script>
<style scoped>
	footer {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 100;
		height: 1rem;
		line-height: 1rem;
	}
	
	footer a {
		display: block;
		width: 100%;
		text-align: center;
		font-size: 0.453333rem;
		color: #fff;
		font-weight: 500;
		border-top-left-radius: 0.066666rem;
		border-top-right-radius: 0.066666rem;
		background-color: #6530E0;
	}
	
	.mint-popup {
		width: 100%;
	}
	
	.selected {
		width: 100%;
		height: 6rem;
	}
	
	.setck {
		background-color: #fff;
		margin-top: 0.266666rem;
		padding: 0.3rem 0.2rem;
		font-size: 0.346666rem;
	}
	
	.setck i {
		font-size: 0.506666rem;
		float: left;
		margin-right: 0.2rem;
	}
	
	.setck i.icon-xuanzhong1 {
		color:#6530E0;
	}
	
	.setck i.icon-danxuankuangxuanzhong {
		color: #CCCCCC;
	}
	
	.mint-cell-wrapper {
		font-size: 0.373333rem !important;
	}
</style>